<template>
  <div class="singList">
    <MusicBack
      title="关注"
      text=""
      :setting="false"
      :arrow="true"
      :border="false"
    />
    <span class="noSongs" v-if="addSingerList.length == 0">暂无关注的歌手</span>
    <div
      class="attSingers"
      v-for="item in addSingerList"
      :key="item.id"
      @click="toMusicIndex(item.id)"
    >
      <div class="singes_img">
        <img :src="item.cover + '?param=120y120'" alt="" />
      </div>
      <div class="singes_msg van-ellipsis">
        <p>
          {{ item.ar }}
        </p>
        <p>
          音乐 {{ item.musicSize }} / 专辑 {{ item.albumSize }} / MV
          {{ item.mvSize }}
        </p>
      </div>
      <!-- 删除 -->
      <div class="singes_slice">
        <van-icon name="arrow" size="20" />
      </div>
    </div>
  </div>
</template>

<script>
import MusicBack from "@/components/common/back.vue";
import { mapGetters } from "vuex";
export default {
  name: "VueMusicMinesingerlist",
  components: {
    MusicBack,
  },
  data() {
    return {
      singerList: [],
    };
  },

  mounted() {},
  computed: {
    ...mapGetters(["addSingerList"]),
  },
  methods: {
    toMusicIndex(id) {
      this.$router.push({
        path: "/MusicIndex",
        query: { id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.singList /deep/ .van-nav-bar__content {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 2.875rem;
  background-color: #fff;
}
// 歌手
.attSingers {
  display: flex;
  text-align: left;
  justify-content: space-between;
  height: 3.125rem;
  margin: .1875rem 0rem .625rem .625rem;
  .singes_img {
    width: 3.125rem;
    height: 3.125rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .singes_msg {
    flex: 1;
    padding-left: .9375rem;
    font-size: 1rem;
    p {
      line-height: 1.5625rem;
    }
    p:nth-child(2) {
      font-size: .75rem;
      color: #666;
    }
  }
  .singes_slice {
    text-align: center;
    width: 3.125rem;
    line-height: 3.75rem;
    height: 3.75rem;
  }
}
.noSongs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  font-weight: 430;
}
</style>